<template>
    <div class="dcq-popup-container" v-if="popOption.visible" :style="{ left: popOption.screenX + 'px', top: popOption.screenY + 'px' }">
        <div class="dcq-popup-container-header">
            <div class="dcq-popup-container-header-title">{{ popOption.title }}</div>
            <div class="dcq-popup-container-header-close vxe-icon-error-circle" @click="onClose">
            </div>
        </div>
        <div class="dcq-popup-container-body">
            <template  v-for="item in popOption.values">
                <div class="dcq-popup-container-body-row" v-if="item.value">
                    <div class="dcq-popup-container-body-row-label">{{ item.label }}：</div>
                    <div class="dcq-popup-container-body-row-value" @click="btnCopy(item.value)">
                        {{ item.value }}
                    </div>
                </div>
           </template>
        </div>
        <div class="dcq-popup-container-footer" v-if="popOption.footer">
            <div class="dcq-popup-container-footer-btn" @click="goToNext">
                {{popOption.btnText}}&nbsp; <vxe-icon name="arrow-right"></vxe-icon>
            </div>
        </div>
        <div class="dcq-popup-container-footer-list" v-if="popOption.footerList">
            <template v-for="item in popOption.footerList">
                <div class="dcq-popup-container-footer-btn" :style="{color:item.color,cursor:item.type==0?'auto':'pointer'}" @click="goBtn(item)">
                    <i :class="item.icon" />&nbsp;{{item.btnText}}
                </div>
            </template>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import '../style/popup.scss';
</style>
<script setup>
import {ref,reactive,onMounted,watch} from "vue"
import { message } from '@/utils/element'
import useClipboard from 'vue-clipboard3';
import { popconfirmProps } from "element-plus";
const { toClipboard } = useClipboard();

const emits = defineEmits(['onClose','toNext','click'])
const props = defineProps({
    popOption:{
        type:Object,
        default(){return {}}
    }
})

function onClose() {
    emits('onClose', false)
}
function goToNext() {
    emits('toNext', props.popOption)
}
function goBtn(row) {
    emits('click', {...props.popOption,...row})
}

const btnCopy = async (str) => {
    try {
        await toClipboard(str + '');
        message(`复制成功：${str}`,2)
    } catch (e) {
        message('复制失败',3);
    }
}

</script>